<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-1"><MostlyCloudy /></el-icon>
            {{ getTitle() }}
        </span>
        <el-icon class="icon-btn" @click="handleAsideWidth()">
          <fold v-if = "store.asideWidth == '250px'"/>
          <Expand v-else/>
        </el-icon>

        <el-tooltip effect="dark" content="刷新" persistent="bottom">
            <el-icon class="icon-btn" @click="handleRefresh"><refresh/></el-icon>
        </el-tooltip>
        时间: {{ nowTime }}

        <div class="ml-auto flex items-center" style="margin-left: auto; margin-right: 20px;">
<!--            <el-icon class="icon-btn"><full-screen/></el-icon>-->
<!--          <span class="flex justify-center items-center text-light-50">-->
<!--                    <el-avatar class="mr-2" :size="25" src="https://qiniu.ligl.top/1682046831918.jpg" />-->
<!--                    {{ store.user.nickName }}-->
<!--                    <el-icon class="el-icon&#45;&#45;right">-->
<!--                        <arrow-down />-->
<!--                    </el-icon>-->
<!--                </span>-->





            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex justify-center items-center text-light-50">
                    <el-avatar class="mr-2" :size="25" src="https://qiniu.ligl.top/1682046831918.jpg" />
                    {{ store.user.nickName }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="user">个人中心</el-dropdown-item>
                    <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
  <ChangePasswordDialog ref="passwordDialog" />
</template>


<script lang="ts" setup>
import { useRouter } from "vue-router";
import {getToken,removeToken} from "@/util/auth"
import { logout } from "@/api/user";
import { toast } from "@/util/util";
import {userMainStore} from "@/store/"
import {onMounted, onUnmounted, Ref, ref} from "vue";
import dayjs from "dayjs";
import {getTitle} from "@/util/util";
const token = getToken()
const router = useRouter()
import ChangePasswordDialog from "@/views/user/ChangePasswordDialog.vue";

const store = userMainStore()
const addressData = ref('')
let nowTime:Ref<string> = ref("");
const handleAsideWidth = () =>{
  console.log("修改侧边菜单宽度")
  store.handleAsideWidth()

}
const passwordDialog = ref<InstanceType<typeof ChangePasswordDialog>>();

const handleCommand = (c:any)=>{
    switch (c){
        case "logout":
            exitLogout()
            break
        case "user":
            router.push('/user')
            break
        case "changePassword":
          passwordDialog.value?.open() // 调用弹窗的 open 方法
          break
    }
}

const handleRefresh = ()=>location.reload()


const exitLogout = ()=>{
  removeToken()
  toast("退出登录成功","success")
  router.push('/login')
  // logout().then(()=>{
  //   removeToken()
  //   toast("退出登录成功","success")
  //   router.push('/login')
  // })
}


let timer: number | null = null;

onMounted(() => {
  timer = window.setInterval(() => {
    nowTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    window.clearInterval(timer);
  }
});





</script>

<style scoped>
.f-header {
  display: flex;
  align-items: center;
  background-color: #0879ea; /* indigo-500 */
  color: #fafafa; /* light-50 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
}
.logo{
    width: 250px;
    @apply flex justify-center items-center text-xl
}
.icon-btn{
    @apply flex justify-center items-center
    height: 64px;
    width: 42px;
    cursor: pointer;
}
.icon-btn:hover{
    @apply bg-indigo-600
}
.f-header .dropdown{
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;
}
</style>
